<template>
  <div>
    <el-row class="tigan">
      试题题干：
      <div class="editorBox">
        <wanXingTianKong ref="editorTK" v-model="modelValue.subjectEditorValue" :height="200" :tiankong="true" @handlTK="handlTk" @handVal="handVal" @input="tiganInp" @keyup.enter.native="tiganInp" @getVal="getVal" />
      </div>
    </el-row>
    <el-row class="hoverOptions pt10 pb10" v-for="(item,i) in modelValue.options" :key="item.optionUuid">
      <el-col :span="2">
        <el-row style="height:100%;">
          <el-col class="center" :span="7">
            <strong>{{i+1}}:</strong>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="16">
        <TinymceEditorTianKongXX :ref="'TinymceEditorTianKongXX'+i" v-model="item.optionTextValue" @input="InpMce(item,i)" @keyup.enter.native="InpMce(item,i)" :height="50" />
      </el-col>
      <el-col class="center" :span="2">
        <el-input v-model="item.optionPercentValue" style="width:50px"></el-input>%
      </el-col>
      <el-col class="centerOp" :span="2">
        <el-tooltip effect="light" content="等效答案" placement="top-start">
          <el-icon class="feedbackIcon" style="color:#409EFF;cursor: pointer;" @click="equivalentBack(item)">
            <Paperclip />
          </el-icon>
        </el-tooltip>
        <!-- <el-button :icon="Plus" type="primary" @click="equivalentBack(item)">等效答案</el-button> -->
        <el-tooltip effect="light" content="选项反馈" placement="top-start">
          <el-icon class="feedbackIcon" style="color:#409EFF;cursor: pointer;" @click="feedback(item)">
            <Position />
          </el-icon>
        </el-tooltip>
        <el-tooltip effect="light" content="删除" placement="top-start">
          <el-icon class="feedbackIcon" style="color:#409EFF;cursor: pointer;" @click="delBack(item,i)">
            <Delete />
          </el-icon>
        </el-tooltip>
      </el-col>
      <el-col v-for="(k,j) in item.equalAnswers" :key="j" :span="20" :offset="1" class="dengxiao pt20 pb20">
        <p style="font-size:14px;width:10%">等效答案:</p>
        <TinymceEditor ref="editor" style="width:90%" v-model="k.equalAnswerEditorValue" :height="50" />
      </el-col>
      <el-col v-if="item.optionTipEditorShow">
        <el-row>
          <el-col :span="3" :offset="2" class="center">选项反馈</el-col>
          <el-col :span="10">
            <TinymceEditor v-model="item.optionTipEditorValue" :height="50" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="border-top: 1px dashed #dcdfe8;;padding-top:10px;margin-top:20px;">
      <el-col :span="4">
        <el-button type="primary" text :icon="Plus" @click="addAnalysis">添加试题解析</el-button>
      </el-col>
    </el-row>
    <el-row v-if="modelValue.explainEditorShow" class="mt20">
      试题解析：
      <div class="editorBox">
        <TinymceEditor ref="editor" v-model="modelValue.explainEditorValue" :height="80" />
      </div>
    </el-row>
  </div>
</template>
<script setup>
import { getCurrentInstance,  toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import { deep } from '../../utils/paper'
import {
  Plus,
  CloseBold,
  ArrowDownBold,
  Document,
} from "@element-plus/icons-vue";
import TinymceEditor from "../component/Editor/index.vue";
import TinymceEditorTianKong from "../component/Editor/indexTianKong.vue";
import TinymceEditorTianKongXX from "../component/Editor/indexTianKongXX.vue";
import wanXingTianKong from '../component/Editor/editorWanXingTianKong.vue';
const { ctx, proxy } = getCurrentInstance();
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: null,
  }
});
onMounted(() => {
  setTimeout(() => {
    if (route.query.serialNumber) {
      let content = editorTK.value.getContent();
      props.modelValue.options.forEach((res) => {
        res.maxText = getMaxText(res.optionUuid, content);
      });
    }
  }, 2000);
});
const getMaxText = (uuid, val) => {
  return val.slice(
    val.indexOf(uuid) - 10,
    val.indexOf("</span>", val.indexOf(uuid)) + 7
  );
};
const addAnalysis = () => {
  //添加试题解析
  props.modelValue.explainEditorShow = !props.modelValue.explainEditorShow;
  props.modelValue.explainEditorValue = "";
};
const addOptions = () => {
  props.modelValue.options.push({
    optionUuid: "",
    optionIndex: 0,
    optionTipEditorValue: "",
    optionTextValue: "",
    optionPercentValue: "",
    optionTipEditorShow: false,
    equalAnswers: [],
  });
};
const calculate = () => {
  //计算百分比
  let num = 0;
  props.modelValue.options.forEach((item) => {
    item.optionPercentValue = Number(
      (100 / props.modelValue.options.length).toFixed(1)
    );
    num += item.optionPercentValue;
  });
  if (num != 100) {
    props.modelValue.options[0].optionPercentValue += 100 - num;
    props.modelValue.options[0].optionPercentValue =
      props.modelValue.options[0].optionPercentValue.toFixed(1);
  }
};
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    props.modelValue.subjectEditorValue = editorTK.value.getContent();
    console.log(editorTK.value.getContent());
    emit("update:modelValue", props.modelValue);
  },
  { deep: true }
);
const editorTK = ref(null);
const handVal = (val) => {
  console.log(149);
  props.modelValue.subjectEditorValue = deep(val);
};
const delBack = (item, i) => {
  //删除
  console.log(154);
  editorTK.value.getText();
  let text = deep(props.modelValue.subjectEditorValue);
  let text2 = text.replace(item.maxText, item.optionTextValue);
  props.modelValue.subjectEditorValue = text2;
  props.modelValue.options.splice(i, 1);
  editorTK.value.song(text2);
  if (props.modelValue.options.length >= 1) {
    props.modelValue.options.forEach((res, i) => {
      res.optionIndex = i;
    });
    calculate();
  }
};
const handlTk = (val) => {
  //Editor填空按钮回传
  console.log(val);
  props.modelValue.options.push(val);
  if (props.modelValue.options.length >= 1) {
    props.modelValue.options.forEach((res, i) => {
      res.optionIndex = i;
    });
    calculate();
  }
  setTimeout(() => {
    props.modelValue.subjectEditorValue = editorTK.value.getContent();
  }, 1000);
};
const log = () => {
  console.log(props.modelValue.subjectEditorValue);
};
const feedback = (i) => {
  //选项反馈
  i.optionTipEditorShow = !i.optionTipEditorShow;
};
const InpMce = (val, i) => {
  console.log(val);
  // 更改选项文字，题干文字跟随变化
  let text = ctx._.refs["TinymceEditorTianKongXX" + i][0].getVal();
  let maxText = `<span id="${val.optionUuid}-wrapper" style="border-bottom: #000 1px solid; padding-left: 10px; padding-right: 10px; display: inline-block; color: red;">${text}</span><span style="display: inline-block;">&nbsp;</span>`;
  // 将原有文字替换
  let yuanText = editorTK.value.getContent();
  // console.log(editorTK.value.getContent());
  // console.log(val.maxText);
  // console.log(maxText);
  let tihuanhou = yuanText.replace(val.maxText, maxText);
  props.modelValue.subjectEditorValue = tihuanhou;
  editorTK.value.song(tihuanhou);
  val.maxText = maxText;
  console.log(maxText);
  console.log(tihuanhou);
};

const tiganInp = () => {
  // 题干文字改变，选项文字跟随变化
  editorTK.value.getText();
};
const equivalentBack = (i) => {
  //等效答案
  i.equalAnswers.push({
    equalAnswerEditorValue: "",
  });
};
const getVal = (val) => {
  //更改题干选项变化
  props.modelValue.subjectEditorValue = val;
  let IndexArr = [];
  let uuIdArr = [];
  let num =
    val.indexOf(
      'style="color: red; display: inline-block; padding-right: 10px; padding-left: 10px; border-bottom: 1px solid #000;'
    ) == -1
      ? val.indexOf(
          'style="border-bottom: #000 1px solid; padding-left: 10px; padding-right: 10px; display: inline-block; color: red;"'
        )
      : val.indexOf(
          'style="color: red; display: inline-block; padding-right: 10px; padding-left: 10px; border-bottom: 1px solid #000;'
        );
  while (num != -1) {
    IndexArr.push(num);
    let text = val.substring(num + 115, val.indexOf("</span>", num + 115));
    uuIdArr.push({ uuid: val.substring(num - 46, num - 10), text });
    num =
      val.indexOf(
        'style="color: red; display: inline-block; padding-right: 10px; padding-left: 10px; border-bottom: 1px solid #000;',
        num + 1
      ) == -1
        ? val.indexOf(
            'style="border-bottom: #000 1px solid; padding-left: 10px; padding-right: 10px; display: inline-block; color: red;"',
            num + 1
          )
        : val.indexOf(
            'style="color: red; display: inline-block; padding-right: 10px; padding-left: 10px; border-bottom: 1px solid #000;',
            num + 1
          );
  }
  props.modelValue.options.forEach((element, i) => {
    uuIdArr.forEach((res) => {
      if (element.optionUuid == res.uuid) {
        element.optionTextValue = res.text;
        InpMceXX(element, i);
      }
    });
  });
};
const InpMceXX = (val, i) => {
  // 更改选项文字，题干文字跟随变化
  let value = deep(val);
  let text =
    value.optionTextValue.indexOf("<p") == 0
      ? value.optionTextValue.slice(3, value.optionTextValue.length - 4)
      : value.optionTextValue;
  let maxText =
    val.maxText.indexOf('style="color: red;') == -1
      ? `<span id="${val.optionUuid}-wrapper" style="color: red; display: inline-block; padding-right: 10px; padding-left: 10px; border-bottom: 1px solid #000;">${text}</span>`
      : `<span id="${val.optionUuid}-wrapper" style="border-bottom: #000 1px solid; padding-left: 10px; padding-right: 10px; display: inline-block; color: red;">${text}</span>`;

  // 将原有文字替换
  let yuanText = deep(props.modelValue.subjectEditorValue);
  let tihuanhou = yuanText.replace(val.maxText, maxText);
  props.modelValue.subjectEditorValue = tihuanhou;
  console.log(val, i);
  console.log(ctx._);
  let name = "TinymceEditorTianKongXX" + i;
  console.log(ctx._.refs[name][0]);
  console.log(ctx._.refs[name]);
  console.log(ctx._.refs[name]);
  if (ctx._.refs[name][0]) {
    ctx._.refs[name][0].setVal(val.optionTextValue);
  }
  val.maxText = maxText;
};
</script>

<style scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.alCenter {
  display: flex;
  align-items: center;
}

.dengxiao {
  display: flex;
  align-items: center;
}
.showOp {
  opacity: 0;
  transition: all 0.5s;
}
.hoverOptions:hover .showOp {
  opacity: 1;
}
.centerOp {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.hoverOptions:hover .feedbackIcon {
  color: #409eff !important;
}
</style>